<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="addressList"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    :prop="this.addressList.consignee"
                    label="consignee"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="phone"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="location"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
</div>
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<!--    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: {
            addressOne: {
                chosenAddressId: '1',
            },
            addressList: [],
        },
        methods: {
            onAdd() {
                location.href = "addressadd.html";
            },
            onEdit(item, index) {
                location.href = "/updateaddress.html";
                // Toast('编辑地址:' + index);
            },
            tableRowClassName({row, rowIndex}) {
                if (row.isDefault === 0) {
                    return 'success-row';
                }
                return '';
            },
            getAddressList() {
                //发请求获取分类数据
                axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/address" + location.search).then(function (response) {
                    let responseBody = response.data;
                    v.addressList = responseBody.data;
                    alert(v.addressList.phone);
                })
            },
        },
        mounted: function () {
            this.getAddressList();
        }
    });
</script>
</body>
</html>